<!--抽屉查看-->
<template>
  <ul class="common-drawer-see">
    <template v-for="(item,key) in option">
      <li
          :key="key"
          v-if="Utils.arrayContain(item.routerRole,$store.state.routerRole) && !item.drawerSeeShow"
          :class="[item.drawerSeeWith?'li2':'']"
          class="common-drawer-see-li"
      >
        <span class="common-drawer-see-li-title" v-if="item.type!=='自定义组件'"> {{ item.label }}</span>
        <template v-if="item.type==='输入框'">
          {{ formData[item.field] }}
        </template>
        <template v-if="item.type==='密码框'">
          ********
        </template>
        <template v-if="item.type==='文本域'">
          {{ formData[item.field] }}
        </template>
        <template v-if="item.type==='单选框'">
          <template v-for="item2 in item.option">
            <template v-if="formData[item.field]===item2.value">
              {{ item2.label }}
            </template>
          </template>
        </template>
        <template v-if="item.type==='多选框'">
          <div>
            <label v-for="(item2,key2) in formData[item.field]" :key="key2">
              <label v-for="(item3,key3) in item.option" :key="key3">
                <label v-if="item2=== item3.value">
                  {{ item3.label }}<i v-if="formData[item.field].length>key2+1">、</i>
                </label>
              </label>
            </label>
          </div>

        </template>
        <template v-if="item.type==='下拉框'">
          <!--不是多选-->
          <template v-if="!item.multiple">
            <!--不是分组-->
            <template v-if="!item.group">
              <template v-for="item2  in item.option">
                <template v-if="formData[item.field]===item2.value">
                  {{ item2.label }}
                </template>
              </template>
            </template>
            <!--是分组-->
            <template v-else>
              <template v-for="item2 in item.option">
                <template v-for="item3 in item2.children">
                  <template v-if="formData[item.field]===item3.value">
                    {{ item3.label }}
                  </template>
                </template>
              </template>
            </template>
          </template>

          <!--是多选-->
          <template v-else>
            <!--不是分组-->
            <template v-if="!item.group">
              <div>
                <label v-for="(item2,key2) in formData[item.field]" :key="key2">
                  <label v-for="(item3,key3) in item.option" :key="key3">
                    <label v-if="item2=== item3.value">
                      {{ item3.label }}<i v-if="formData[item.field].length>key2+1">、</i>
                    </label>
                  </label>
                </label>
              </div>
            </template>
            <!--是分组-->
            <template v-else>
              <div>
                <label v-for="(item2,key2) in formData[item.field]" :key="key2">
                  <label v-for="(item3,key3) in item.option" :key="key3">
                    <label v-for="(item4,key4) in item3.children" :key="key4">
                      <label v-if="item2=== item4.value">
                        {{ item4.label }}<i v-if="formData[item.field].length>key2+1">、</i>
                      </label>
                    </label>
                  </label>
                </label>
              </div>
            </template>

          </template>

        </template>
        <template v-if="item.type==='级联选择器'">
          <!--没有多选-->
          <template v-if="!item.multiple">
            <div>
              <label v-for="(item2,key2) in formData[item.field]" :key="key2">
                <label v-for="(item3,key3) in item.option" :key="key3">
                  <label v-if="item2=== item3.value">
                    {{ item3.label }}<i v-if="formData[item.field].length>key2+1">/</i>
                  </label>
                  <label v-for="(item4,key4) in item3.children" :key="key4">
                    <label v-if="item2=== item4.value">
                      {{ item4.label }}<i v-if="formData[item.field].length>key2+1">/</i>
                    </label>
                    <label v-for="(item5,key5) in item4.children" :key="key5">
                      <label v-if="item2=== item5.value">
                        {{ item5.label }}<i v-if="formData[item.field].length>key2+1">/</i>
                      </label>
                    </label>
                  </label>
                </label>
              </label>
            </div>
          </template>
          <!--有多选-->
          <template v-else>
            <div v-for="(item2,key2) in formData[item.field]" :key="key2">
              <div>
                <label v-for="(item3,key3) in item2" :key="key3">
                  <label v-for="(item4,key4) in item.option" :key="key4">
                    <label v-if="item3=== item4.value">
                      {{ item4.label }}<i v-if="item2.length>key3+1">/</i>
                    </label>
                    <label v-for="(item5,key5) in item4.children" :key="key5">
                      <label v-if="item3=== item5.value">
                        {{ item5.label }}<i v-if="item2.length>key3+1">/</i>
                      </label>
                      <label v-for="(item6,key6) in item5.children" :key="key6">
                        <label v-if="item3=== item6.value">
                          {{ item6.label }}<i v-if="item2.length>key3+1">/</i>
                        </label>
                      </label>
                    </label>
                  </label>
                </label>
              </div>
            </div>
          </template>
        </template>
        <template v-if="item.type==='日期选择器'">
          <!--年-->
          <template v-if="item.timeType==='year'">
            {{ formData[item.field] ? Utils.timeDate(formData[item.field], 1) : '' }}
          </template>
          <!--月-->
          <template v-if="item.timeType==='month'">
            {{ formData[item.field] ? Utils.timeDate(formData[item.field], 2) : '' }}
          </template>
          <!--日-->
          <template v-if="item.timeType==='date'">
            {{ formData[item.field] ? Utils.timeDate(formData[item.field], 3) : '' }}
          </template>
          <!--日期和时间-->
          <template v-if="item.timeType==='datetime'">
            {{ formData[item.field] ? Utils.timeDate(formData[item.field], 4) : '' }}
          </template>
          <!--多个日-->
          <template v-if="item.timeType==='dates'">
            <label v-for="(item2,key2) in formData[item.field]" :key="key2">
              {{ item2 ? Utils.timeDate(item2, 3) : '' }}
            </label>
          </template>
          <!--日期和时间范围-->
          <template v-if="item.timeType==='datetimerange'">
            <div>
              <label v-for="(item2,key2) in formData[item.field]" :key="key2">
                {{ item2 ? Utils.timeDate(item2, 4) : '' }}
                <label v-if="formData[item.field].length>key2+1" class="time-to">至</label>
              </label>
              <label class="time-to2">相差：{{
                  formData[item.field].length === 2 ? Utils.intervalTime(formData[item.field], 4) : 0
                }}
              </label>
            </div>
          </template>
          <!--日期范围-->
          <template v-if="item.timeType==='daterange'">
            <div>
              <label v-for="(item2,key2) in formData[item.field]" :key="key2">
                {{ item2 ? Utils.timeDate(item2, 3) : '' }}
                <label v-if="formData[item.field].length" class="time-to">key2+1">至</label>
              </label>
              <label class="time-to2">相差：{{
                  formData[item.field].length === 2 ? Utils.intervalTime(formData[item.field], 1) : 0
                }}
              </label>
            </div>
          </template>
          <!--月份范围-->
          <template v-if="item.timeType==='monthrange'">
            <div>
              <label v-for="(item2,key2) in formData[item.field]" :key="key2">
                {{ item2 ? Utils.timeDate(item2) : '' }}
                <label v-if="formData[item.field].length>key2+1" class="time-to"> 至 </label>
              </label>
              <label class="time-to2">相差：{{
                  formData[item.field].length === 2 ? Utils.intervalTime(formData[item.field], 5) : 0
                }}
              </label>
            </div>
          </template>
        </template>
        <template v-if="item.type==='文件上传'">
          <div class="table-upload-file-box">
            <ul>
              <li
                  v-for="(item2,key2) in formData[item.field]"
                  :key="key2"
                  @click="uploadFileDownload(item2[item.urlType],item2)"
              >
                <i class="el-icon-notebook-2"></i>
                <span>{{ item2.name }}</span>
                <i class="el-icon-download"></i>
              </li>
            </ul>
          </div>
        </template>
        <template v-if="item.type==='图片上传'">
          <div class="table-upload-img-show">
            <ul>

              <li v-for="(item2,key2) in  formData[item.field]" :key="key2">
                <el-image
                    :src="item2[item.urlType]"
                    :preview-src-list="Utils.arrayMoveOne(item2[item.urlType],formData[item.field],item.urlType)"
                    @click="clickImage"
                >
                </el-image>
              </li>
            </ul>
          </div>
        </template>
        <template v-if="item.type==='自定义组件'">
          <component :is="item.DrawerSeeChildrenName" :props="formData[item.field]"></component>
        </template>
      </li>
    </template>

  </ul>
</template>

<script>

export default {
  components: {},
  props: ['option', 'formData'],
  data() {
    return {
      wrapperElem: null,//图片放大
    };
  },
  mounted() {
  },
  methods: {
    //附件下载
    uploadFileDownload(url, item) {
      //下载不了是跨域的问题
      // const URL = this.$store.state.env + '/' + url
      const URL = url
      // let tmpArr = URL.split('/')
      // let fileName = tmpArr[tmpArr.length - 1]
      window.URL = window.URL || window.webkitURL
      let xhr = new XMLHttpRequest()
      xhr.open('get', URL, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          let blob = this.response
          let fileUrl = window.URL.createObjectURL(blob)
          let a = document.createElement('a')
          ;(document.body || document.documentElement).appendChild(a)
          a.href = fileUrl
          if ('download' in a) {
            a.download = item.name
          } else {
            a.setAttribute('download', item.name)
          }
          a.target = '_self'
          a.click()
          a.remove()
        }
      }
      xhr.send()
      // window.open(url)
    },
    //图片放大下载
    clickImage() {
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName(
            'el-image-viewer__actions__inner'
        )
        let downImg = document.createElement('i')
        downImg.setAttribute('class', 'el-icon-download')
        wrapper[0].appendChild(downImg)
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0]
          this.cusClickHandler()
        }
      })
    },
    cusClickHandler() {
      this.wrapperElem.addEventListener('click', this.hideCusBtn)
    },
    hideCusBtn(e) {
      let className = e.target.className
      if (className === 'el-icon-download') {
        let imgUrl = document.getElementsByClassName(
            'el-image-viewer__canvas'
        )[0].children[0].src
        this.downloadImage(imgUrl)
      }
    },
    downloadImage(imgUrl) {
      let tmpArr = imgUrl.split('/')
      let fileName = tmpArr[tmpArr.length - 1]
      window.URL = window.URL || window.webkitURL
      let xhr = new XMLHttpRequest()
      xhr.open('get', imgUrl, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          let blob = this.response
          let fileUrl = window.URL.createObjectURL(blob)
          let a = document.createElement('a')
          ;(document.body || document.documentElement).appendChild(a)
          a.href = fileUrl
          if ('download' in a) {
            a.download = fileName
          } else {
            a.setAttribute('download', fileName)
          }
          a.target = '_self'
          a.click()
          a.remove()
        }
      }
      xhr.send()
    },
    //图片放大下载结束
  },
};
</script>

<style lang="scss" scoped>
</style>
